<template>
    <div>
     	<!-- search      -->
<div>
	<form action="/">
<van-search
v-model="value"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
@cancel="onCancel"
/>
</form>
</div>


	<!-- search 结束     -->
	<div> 
 <van-tabs v-model="active">
	<van-tab title="国内"> 
<van-index-bar :index-list="indexList" >
<van-index-anchor index="热门推荐" />
<!-- 热门城市内容区域 -->
   <div class="button-list">
	  <div class="button-wrapper">
		<div class="button">北京</div>
	 </div>
	  <div class="button-wrapper">
		<div class="button">北京</div>
	 </div> <div class="button-wrapper">
		<div class="button">北京</div>
	 </div> <div class="button-wrapper">
		<div class="button">北京</div>
	 </div> <div class="button-wrapper">
		<div class="button">北京</div>
	 </div>
	 <div class="button-wrapper">
		<div class="button">北京</div>
	 </div><div class="button-wrapper">
		<div class="button">北京</div>
	 </div>
   </div>
<!-- 热门城市结束 -->
  <van-index-anchor index="A" />
   <van-cell title="文本" />
   <van-cell title="文本" />
   <van-cell title="文本" />
 
   <van-index-anchor index="B" />
   <van-cell title="文本" />
   <van-cell title="文本" />
   <van-cell title="文本" />
 

<van-index-anchor index="C" />
   <van-cell title="文本" />
   <van-cell title="文本" />
   <van-cell title="文本" />
 

	 <van-index-anchor index="D" />
   <van-cell title="文本" />
   <van-cell title="文本" />
   <van-cell title="文本" />
  </van-index-anchor> 
</van-index-bar> 

	</van-tab>
 <van-tab title="国际港澳台"> 
 
<div class="box">
 <div class="usa_left">
     <!-- 组件下标记从0开始 -->
 <van-sidebar v-model="activeKey">
  <van-sidebar-item title="热门" />
  <van-sidebar-item title="中国港澳台" />
  <van-sidebar-item title="东南亚" />
  <van-sidebar-item title="东南亚" />
  <van-sidebar-item title="东南亚" />
  <van-sidebar-item title="东南亚" />

</van-sidebar>

 </div>
 

<!-- 内容区域 -->
 
<div class="usa_banner">
  
<div class="banner_one">
    <div class="one_banner">日本</div>
</div>

<div class="banner_one">
    <div class="one_banner">日本</div>
</div>
<div class="banner_one">
    <div class="one_banner">日本</div>
</div>
<div class="banner_one">
    <div class="one_banner">日本</div>
</div>
</div>
</div>
 </van-tab>
  </van-tabs>
 </div> 
	<!-- indexBar索引栏结束 -->
    </div>
</template>
<script>
 
export default {
 data() {
return {
// 搜素框search默认值
  value: '',
  active:'',
//   indexBar索引栏
   indexList: ['热门推荐','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T',
   'U','V','W','X','Y','Z'],
//    国外
    activeKey: 0,
};
},
methods: {
onSearch(val) {
  Toast(val);
},
onCancel() {
  Toast('取消');
this.$router.push("/jip");
 
},
},
}
</script>

<style  scoped>
.van-index-bar__sidebar{
margin-top: -10px;

}
.van-index-bar__sidebar span{    display: block;
padding: .1rem 0;
color: #30a1f2;
font-size: .58rem;}
.button-list{
 overflow: hidden;
 padding:  0.1rem 0.6rem  0.05rem  0.1rem  
}
.button-wrapper{
 float: left;
 width: 30.83%;
}
.button{
 margin: 0.3rem;
 /* padding:0.05rem 0; */
 height: 40px;
 line-height: 40px;
 text-align: center;
 border: 0.05rem solid #ccc;
 border-radius: .06rem;
 background-color: #f6f7f9;
}
/* 国外*/
.box{
    width: 100%;
  
}
.usa_left{
    float: left;
    width: 20%;
}
.usa_banner{
  
    padding:0.3rem .6rem  1rem 1.1rem;
    float:right;
     width: 80%;
    background: white;
}

.banner_one{
    float: left;
     width: 25.33%;
     height: 30px;
     text-align: center;
     line-height: 30px;
     background: chartreuse;
     margin:10px  10px ;
}

</style>
